<template>
  <view class="page-cart">
    <!-- <loading-page :loading="!cart" /> -->
    <view v-if="cart && cart.carts.length">
      <view class="cart-list">
        <cart-product v-for="(item, index) in cart.carts" @change="cartChange" :key="index" :product="item"></cart-product>
      </view>
      <cart-bottom :quantity="cart.quantity" :isAllSelected="isAllSelected" :ids="cartIds" @change="cartChange" :total="cart.amount_format" />
    </view>
    <no-item v-else />
  </view>
</template>

<script setup>
import cartBottom from './components/cart-bottom'
import cartProduct from './components/cart-product'
const { proxy } = getCurrentInstance()
proxy.$util.setTabBarLanguage()

const cart = ref(null)

onShow(() => {
  loadData()
})

const cartChange = res => {
  cart.value = res
}

const loadData = () => {
  proxy.$http.get('carts', null, {hload: !cart.value}).then(res => {
    cart.value = res
    uni.setStorageSync("cart_number", res.quantity)
    proxy.$util.updateCartTabBar()
  })
}

const cartIds = computed(() => {
  return cart.value ? cart.value.carts.map(item => item.cart_id) : []
})

const isAllSelected = computed(() => {
  return cart.value ? cart.value.carts.every(item => item.selected) : false
})

onPullDownRefresh(() => {
  loadData()
})
</script>

<style lang="scss">
.page-cart {
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
}

.cart-list {
  padding: 0 20rpx;
}
</style>
